<template>
  <div class="chart-container">
    <div ref="pieChart" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'FanProvincePieChart',
  data() {
    return {
      pieChart: null,
      chartData: [
      {    value: 105,  name: "认罪认罚"},
      {    value: 15,  name: "认罪不认罚"},
      {    value: 25,  name: "不认罪认罚"},
      ],
      colorArr: ['rgba(238, 153, 85, 1)', 'rgba(65, 126, 255, 1)', 'rgba(1, 219, 222, 1)'],


    };
  },
  mounted() {
    this.initPieChart();
    this.updateChart();
    // this.fetchChartData();
  },
  methods: {
    initPieChart() {
      this.pieChart = echarts.init(this.$refs.pieChart);
    },
    async fetchChartData() {
      try {
        const response = await this.$axios.get('/api/Analyse/fansProportionWithProvince');
        this.chartData = response.data.data.map(item => ({
          name: item.name,
          value: Number(item.value), // 确保值是数字类型
        }));
        this.updateChart();
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    },
    updateChart() {
      this.pieChart.setOption(this.getPieChartOption(this.chartData));
    },
    getPieChartOption(data) {
      const colorArr = this.colorArr;
      function getRich() {
        let result = {};
        colorArr.forEach((v, i) => {
          result[`normal${i}`] = {
            fontSize: 16,
            align: 'left',
            padding: [30, 4, 0, 0],
            color: '#fff',
            fontFamily: 'PingFang',
          };
        });
        return result;
      }

      return {
        color: colorArr,
        title: {
          text: '粉丝省内省外占比',
          show: false,
          left: 'center',
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        grid: {
          bottom: 150,
          left: 100,
          right: '10%',
        },
        series: [
          {
            radius: ['25%', '60%'],
            center: ['50%', '50%'],
            type: 'pie',
            startAngle: 20,
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  var total = data.reduce((sum, item) => sum + item.value, 0);
                  var percent = ((params.value / total) * 100).toFixed(0) + '%';
                  const index = params.dataIndex;
                  return [`{normal${index}|${params.name}：}{normal${index}|${percent}}`].join('\n');
                },
                padding: [0, -80],
                rich: getRich(),
              },
              emphasis: {
                show: true,
              },
            },
            labelLine: {
              lineStyle: {
                color: '#FF72A2',
                type: 'dashed'
              },
              length: 25,
              length2: 10,
            },
            name: '认罪情况',
            data: data,
          },
          // 边框的设置
          {
            radius: ['25%', '30%'],
            center: ['50%', '50%'],
            type: 'pie',
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            animation: false,
            tooltip: {
              show: false,
            },
            data: [
              {
                value: 1,
                itemStyle: {
                  color: 'rgba(37,109,137,0.22)',
                },
              },
            ],
          },
          {
            name: '',
            type: 'pie',
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            center: ['50%', '50%'],
            radius: ['65%', '65%'],
            label: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 9,
                name: '',
                itemStyle: {
                  normal: {
                    borderWidth: 2,
                    borderColor: 'rgba(126,158,255,0.43)',
                  },
                },
              },
            ],
          },
        ],
      };
    }
  }
};
</script>

<style scoped>
.chart-container {
  width: 50%;
  height: 100%;
}

.left-top {
  width: 156px;
  height: 33px;
  margin-left: 10px;
  align-items: center;
  line-height: 33px;
  text-align: center;
  background-image: url('/public/imgs/lefis.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-weight: 400;
  font-size: 13px;
  color: #FFFFFF;
}

.chart {
  width: 310px;
  height: 190px;
}
</style>
